<template>
	<ui-container :scrollGoTop="0" :full="true" :scrollbar="false">
		<view class="my_wrapper">

			<view class="wrapper">
				<!-- #ifndef H5 -->
				<global-nav-bar @setHeight="setHeight" left-icon="back" title="我的电梯" :fixed="true" backgroundColor="#2C2C2C"
					color="#fff"></global-nav-bar>
				<!-- #endif -->

				<view class="item_search">
					<view class="search-bar">
						<uni-search-bar class="uni-search-bar" v-model="searchVal" clearButton="auto" cancelButton="none"
							placeholder="搜索项目/电梯关键词" @blurs="searchInput" />
					</view>
					<view class="search-bar-right">
						<filterModel ref="filterModel" :showSelect="false" :disabled="disabledFilter" v-if="showFilter"
							:all="allFilter" :userIds="userIds" :csd="csd" :filterObj="obj" :isShowArr="tabIdx"
							@filterd="filterd"></filterModel>
					</view>
				</view>

				<view class="tabs" v-if="findRoute('depart_elevator')">
					<view :class="['tabs-item', tabIdx == 2 ? 'act' : '']" v-if="findRoute('depart_elevator')"
						@click="changeTab(2)">部门管理电梯</view>
					<view :class="['tabs-item', tabIdx == 1 ? 'act' : '']" v-if="findRoute('personal_elevator')"
						@click="changeTab(1)">个人管理电梯</view>
				</view>
				<view class="approveStatus" v-if="tabIdx == 1">
					<view v-for="(item, index) in statusList" :key="index"
						:class="[statusActive === index ? 'apptop active' : 'apptop']" @click="changeStatus(index)">{{
							item
						}}
					</view>
				</view>

				<workerFilter v-if="tabIdx == 2 && userinfo.role_name !== 'maintenance'" :membersData="membersData"
					@submit="submitSearch"></workerFilter>

			</view>
			<!-- <view style="height: 150rpx;"></view> -->
			<view class="item_content">
				<tk-screen-scroll class="item_content" :list="['全部', '责任电梯', '维保电梯']" @getActIdx="changeStatus"
					:height="pageHight - 140">

					<scroll-view @scrolltolower="scrolltolower" :style="{ height: pageHight - 100 + 'px' }" :scroll-y="true"
						v-if="gardenArr.length" @scroll="scroll" :scroll-top="scrollGoTop">
						<view class="content_L" @click.stop="">
							<view class="item_top">
								<view>共<text>{{ eleTotalObj.buildingTotal || 0 }}</text>个项目
									<text>{{ eleTotalObj.eleTotal || '0' }}</text>台梯
								</view>
							</view>

							<view class="L_text" v-for="(item, i) in gardenArr" :key="item.buildingId">

								<view class="L_container">
									<view class="container_left">
										<image src="@/static/images/index/build.svg" mode=""></image>
									</view>
									<view class="container_Cont">
										<view class="L_one" @click.stop="toItemDetial(item)">
											<text>{{ item.buildingName }}</text>
											<uni-icons color="#999" size="14" type="arrowright" />
										</view>
										<text class="L_two">{{ item.address }}</text>
									</view>
									<view class="container_right" @click="changeCollapse(item, i)">
										<view class="trrow">
											<view
												:style="item.isOpens ? 'transform:rotate(135deg);transition: 0.3s all;' : 'transition: 0.3s all;transform:rotate(-45deg)'">
											</view>
										</view>
									</view>

								</view>
								<view class="lines" v-if="item.isOpens" style="width: 100%;"></view>
								<view class="content" v-if="item.isOpens">
									<view class="cont_L">
										<view :class="item.status ? 'contElevar actElevar' : 'contElevar'"
											@click="toMiantain(item)" v-for="(item, c) in elevatorList"
											:key="item.elevatorId"
											:style="{ padding: c === 0 && elevatorList.length === 1 ? '30rpx 0 0 0' : '30rpx 0' }">
											<view class="contElevar_Left">
												<view class="contTitle" style="margin-bottom: 12rpx;">
													<image class="tit_img" src="/static/images/index/total.png"
														mode=""></image>
													<text style="color: #333;font-weight: 600; font-size: 28rpx ">{{
														item.elevatorAddress || '--' }}</text>
													<text
														v-if="item.contractStatus == 3 && findRoute('mystatistics_contract')"
														class="redTag">即将到期</text>
													<text
														v-if="item.contractStatus == 1 && findRoute('mystatistics_contract')"
														class="redTag">到期未签</text>
												</view>

												<view class="info">
													{{ item.useType == 0 ? '年审梯' : '非年审梯' }}
													<text>|</text>
													{{ strLengt(item.modeName) }}
													<text>|</text>
													{{ item.brandName || '未设置品牌' }}
													<text>|</text>
													{{ getYear(item.madeDate) }}年
												</view>
												<view class="infoTips" @click.stop="goElevator(item, 'info')"
													v-if="!item.isComplete">
													<text>信息未完善</text>
													<uni-icons color="#fa6400" size="12" type="arrowright" />
												</view>
											</view>

											<view class="contElevar_Right" @click.stop="userClick(item, c)"
												v-if="item.realNames">
												<view class="middle_R">
													<view class="nameContent">
														<view class="memberName"
															v-for="(it, index) in (item.realNames || '').split(',').slice(0, 2)"
															:key="index">
															{{
																it && it.length > 2 ? it.slice(-2) : (it || '')
															}}
															<view class="people">责任人</view>
														</view>
														<view style="margin-top: 10rpx; margin-right: 12rpx;">
															<uni-icons :type="actState === c ? 'arrowup' : 'arrowdown'"
																size="16" color="#999;"></uni-icons>
														</view>

													</view>
												</view>
											</view>
											<view class="lines" v-if="c !== elevatorList.length - 1"
												style="width:680rpx; position:absolute;bottom: 0;"></view>
										</view>
										<view style="display: flex;justify-content: center;">
											<uni-load-more v-if="eleShow" :status="eleState"
												:contentText="contentText"></uni-load-more>
										</view>

									</view>
								</view>

							</view>

							<uni-load-more :status="state" :contentText="contentText"></uni-load-more>
							<!-- <view v-if="gardenArr.length === 0" style="background:#f8f8f8; margin-top:100rpx;text-align: center;color: #999999;">
					暂无数据
				</view> -->
						</view>
					</scroll-view>

					<view class="empty" :style="{ height: pageHight - 140 + 'px' }" v-else>
						<view class="circle">
							<image src="/static/images/emptyS.png" mode=""></image>
						</view>

						<view class="title">
							暂无搜索结果
						</view>
						<view class="tips">
							可以更换搜索条件试试
						</view>
					</view>
				</tk-screen-scroll>
			</view>
			<view-top ref="viewTop" :scrollTop="scrollTop" :distance="100" @goTop="goTop"></view-top>

		</view>
		<view class="popupWrapper" @click="close()" :style="showPopups ? 'display: flex;' : 'display: none;'">
			<view class="calendarEdit">
				<view class="edit_bor" @click="close()">
					<view class="down-btn"></view>
				</view>
				<view class="edit_content">
					<view class="executive_tit">维保责任人</view>
					<scroll-view scroll-y="true" style="height: 480rpx;">
						<view class="executive">
							<view v-for="(item, index) in mantlesArr" :key="index"
								:class="[index === mantlesArr.length - 1 ? 'last' : '', 'executive_user']">
								<view class="memberName">
									{{
										item.realNames && item.realNames.length > 2 ? item.realNames.slice(-2) :
										(item.realNames || '')
									}}
								</view>
								<view>{{ item.realNames }}</view>
								<view style="margin-left: auto;" @click.stop="dial(item)">
									<image src="/static/images/callPhone.svg" mode=""
										style="width: 48rpx;height: 48rpx;">
									</image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

	</ui-container>
</template>

<script>
// import collapse from "@/components/uni-collapse/uni-collapse.vue"
// import collapseItem from "@/components/uni-collapse-item/uni-collapse-item.vue"
import {
	getElevatorGroup,
	getElevatorList,
	getElevatorListChild,
	getElevatorListGroup,
	myElevatorStatistics,
	getDeptBuildingList,
	getPersonalBuildingList,
	getDeptElevatorList,
	getPersonalElevatorList,
	myElevatorStatisticsPlus
} from '@/apis/barrierSearch.js';
import { getMembers, getGroups } from '@/apis/building.js';
import filterModel from './components/filter-modelPlus.vue';
import workerFilter from './components/worker-filter.vue';
import GlobalNavBar from '@/components/uni-nav-bar/global-nav-bar';
import unisearchbar from '@/components/uni-search-bar/uni-search-bar.vue';
import { mapState } from 'vuex';
import { getDiffYear } from '@/utils/tools.js';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import { removeEmpty } from '@/utils/utils.js';
import uiContainer from '@/components/ui-container/ui-container.vue';
import viewTop from '@/components/viewTop/viewTop.vue';
import TkScreenScroll from '@/components/tk-screen-scroll/index';
export default {
	data() {
		return {
			tabIdx: 2,
			mheight: 0,
			scrollGoTop: 0, // 返回顶部
			scrollTop: 0,  // 滚动距离
			showFilter: false,
			allFilter: true,
			disabledFilter: false,
			csd: {}, // 筛选
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			},
			pageHight: uni.getSystemInfoSync().windowHeight,
			gardenArr: [],
			elevatorList: [],
			state: '',
			eleState: '',
			eleShow: true, // 显示电梯列表更多状态
			totalPage: 0,
			obj: {
				current: 1,
				size: 20
			},
			searchVal: '',
			groupLeader: null,
			eleTotalObj: {},// 电梯统计数据
			title: '我的电梯',
			userIds: '',
			tempList: ['buildingId', 'buildingName', 'current', 'size', 'allChecked', 'eleClassify', 'module', 'notSetPrincipal'],
			statusList: ['全部', '责任电梯', '维保电梯'],
			statusArr: ['部门', '责任人',],
			statusActive: 0,
			typeList: [
				{ name: '部门管理电梯', id: 1 },
				{ name: '个人管理电梯', id: 2 },
			],
			activeitemindex: 0,
			actState: -1,
			mantlesArr: [],// 责任人
			selectArrObj: {},// 部门选择和责任人数据
			membersData: [],
			touchStartY: 0,
			showPopups: false
		};
	},
	components: {

		workerFilter,
		GlobalNavBar,
		filterModel,
		unisearchbar,
		uniNavBar,
		uiContainer,
		viewTop,
		TkScreenScroll
	},
	computed: {
		...mapState('user', ['userinfo'])
	},
	onLoad(os) {
		if (this.findRoute('depart_elevator')) {
			this.tabIdx = 2;
			this.changeGetMembers();
		} else if (this.findRoute('personal_elevator')) {
			this.tabIdx = 1;
		}

		if (os.data) {
			const data = JSON.parse(os.data);
			const value = data.value;
			this.obj[data.key] = data.value.join(',');
			this.allFilter = false;
			// this.csd[`${data.key}`]=[Number(`${data.value}`)]
			this.csd[`${data.key}`] = data.value;
		}
		uni.getStorage({
			key: 'statistical',
			success: (res) => { 
				const { id, title } = res.data;
				this.userIds = id;
				if (title) {
					this.title = title + '维保电梯';
					uni.setNavigationBarTitle({
						title: this.title
					});
				}
				
				setTimeout(() => {
					this.initElevatorGroup();
					this.initStatistics();
				}, 500);
			}
		});

		this.showFilter = true;
	},
	onShow() { },
	mounted() { },
	methods: {
		changeTab(idx) {
			this.tabIdx = idx;
			this.obj = {};
			this.obj.current = 1;
			this.obj.size = 20;
			this.gardenArr = [];
			this.statusActive = 0;
			this.searchVal = '';
			this.initElevatorGroup();
			this.initStatistics();
			if (idx === 2) {
				this.changeGetMembers();
			}
		},
		setHeight(n) {
			this.mheight = n;
			this.pageHight = this.pageHight - n;
		},
		goTop() {
			this.scrollGoTop = 1;
			this.$nextTick(() => {
				this.scrollGoTop = 0;
			});
		},
		scroll(e) {
			this.scrollTop = e.target.scrollTop;
		},
		// 项目统计
		initStatistics(types) {
			const { size, current, ...params } = this.obj;
			let query = {};
			if (!params.allChecked) {
				query = { ...params };
			}
			let tempParams = { ...query };
			for (let key in tempParams) {
				if (!this.tempList.includes(key)) {
					tempParams[key] = tempParams[key].split(',');
				}
			} 

			let resultObjs = removeEmpty(tempParams);
			if (this.statusActive === 1) {// 处理零为空
				resultObjs.eleClassify = 0;
			}
			resultObjs.module = this.tabIdx - 1;
			myElevatorStatisticsPlus(resultObjs).then(res => {
				if (res.code === 200) {
					this.eleTotalObj = res.data || {};
				}
			});
		},
		getYear(d) {
			return d ? getDiffYear(d) : '-';
		},
		strLengt(str) {
			if (str && str.length > 5) {
				return str.substring(0, 5) + '...';
			}
			return str || '--';
		},
		// 筛选器
		filterd(res) {
			// console.log(res, '筛选器');
			this.gardenArr = [];
			this.obj.current = 1;
			this.totalPage = 0;
			this.state = '';
			if (res.allChecked) {
				this.obj.allChecked = true;
				if (!this.obj.types) {
					delete this.obj.types;
				}
				if (!this.obj.useTypes) {
					delete this.obj.useTypes;
				}
				if (!this.obj.brandIds) {
					delete this.obj.brandIds;
				}
				if (!this.obj.contractStatus) {
					delete this.obj.contractStatus;
				}
				this.initElevatorGroup();
				this.initStatistics();
				return;
			}
			this.obj.allChecked = false;
			this.obj.types = res.choosed.types ? res.choosed.types.join(',') : '';
			this.obj.useTypes = res.choosed.useTypes ? res.choosed.useTypes.join(',') : '';
			this.obj.brandIds = res.choosed.brandIds ? res.choosed.brandIds.join(',') : '';
			this.obj.contractStatus = res.choosed.contractStatusT ? res.choosed.contractStatusT.join(',') : '';
			// console.log(this.obj, "接受到的值")
			this.initElevatorGroup();
			this.initStatistics();
		},

		// 部门选择
		submitSearch(obj1, obj2) { 
			this.obj.current = 1;
			this.obj.userIds = obj1.selectArr.join(',');
			this.obj.deptIds = obj2.selectArr.join(',');
			this.obj.notSetPrincipal = obj1.seletNull;

			this.closeItem();
			this.initElevatorGroup('act');
			this.initStatistics();
		},
		// 树形部门
		changeGetMembers() {
			return new Promise((resolve, reject) => {
				getGroups().then(res => {
					if (res.code === 200) {
						const data = res.data || [];
						this.membersData = data;
						resolve(data);
					}
				});
			});
		},
		// 维保过的小区
		initElevatorGroup(type) {
			uni.showLoading({
				title: '数据加载中',
				icon: 'none',
				mask: true,
			});
			var handChange;
			let params = { ...this.obj };
			for (let key in params) {
				if (!this.tempList.includes(key)) {
					params[key] = params[key].split(',');
				}
			}
			let resultObj = removeEmpty(params);
			if (this.statusActive === 1) {
				resultObj.eleClassify = 0;
			}
			if (this.findRoute('personal_elevator') && this.tabIdx === 1) {
				handChange = getPersonalBuildingList(resultObj);
			}
			if (this.findRoute('depart_elevator') && this.tabIdx === 2) {
				handChange = getDeptBuildingList(removeEmpty(params));
			}
			if (!this.findRoute('personal_elevator') && !this.findRoute('depart_elevator')) {
				handChange = getPersonalBuildingList(resultObj);
			}

			this.state = 'loading';
			handChange.then(res => {
				if (res.code === 200) {
					uni.hideLoading();
					this.state = 'noMore';
					let data = res.data.records || [];
					this.totalPage = res.data.pages;
					if (data.length > 0) {
						let newGardenArr = this.gardenArr;
						this.gardenArr = newGardenArr.concat(data);
					}
					if (type === 'act') {
						this.gardenArr = data;
					}
				}
			}).catch(err => {
				this.state = 'noMore';
			});
		},

		scrolltolower() {
			if (this.obj.current < this.totalPage) {
				this.obj.current += 1;
				this.initElevatorGroup();
			} else {
				this.state = 'noMore';
			}
		},
		// 
		clearClick() {
			this.gardenArr = [];
			this.statusActive = 0;
			this.searchVal = '';
			this.obj.buildingName = '';
			this.obj.current = 1;
			this.initElevatorGroup('act');
			this.initStatistics();
		},
		// 搜索
		searchInput(res) {
			// let val = res.detail.value
			this.obj.current = 1;
			if (res) {
				this.obj.buildingName = res;
			} else {
				this.obj.buildingName = '';
			}
			this.closeItem();
			this.initElevatorGroup('act');
			this.initStatistics();
		},
		changeCollapse(obj, index) {
			let gardenArrs = this.gardenArr;
			for (let i = 0; i < gardenArrs.length; i++) {
				if (i === index) {
					gardenArrs[i].isOpens = !gardenArrs[i].isOpens;
				} else {
					gardenArrs[i].isOpens = false;
				}
			}
			if (!gardenArrs[index].isOpens) {
				this.$forceUpdate();
				return;
			}

			let result;
			this.eleState = 'loading';
			this.eleShow = true;
			this.elevatorList = [];
			const params = { size: 100, current: 1, buildingId: obj.buildingId, eleClassify: this.obj.eleClassify, buildingName: this.obj.buildingName };
			if (this.findRoute('personal_elevator') && this.tabIdx === 1) {
				let resultObjs = removeEmpty(params);
				if (this.statusActive === 1) {
					resultObjs.eleClassify = 0;
				}
				result = getPersonalElevatorList(resultObjs);
			}
			if (this.findRoute('depart_elevator') && this.tabIdx === 2) {
				params.deptIds = this.obj.deptIds ? this.obj.deptIds.split(',') : '';
				params.userIds = this.obj.userIds ? this.obj.userIds.split(',') : '';
				params.notSetPrincipal = this.obj.notSetPrincipal;
				result = getDeptElevatorList(removeEmpty(params));
			}
			if (!this.findRoute('personal_elevator') && !this.findRoute('depart_elevator')) {
				result = getPersonalElevatorList(removeEmpty(params));
			}
			result.then(res => {
				if (res.code === 200) {
					let elevatorList = res.data || [];
					this.elevatorList = elevatorList;
					this.eleState = 'noMore';
					if (elevatorList.length > 0) {
						this.eleShow = false;
					} else {
						this.eleShow = true;
					}
				}
			}).catch(() => {
				this.eleState = 'noMore';
				this.eleShow = false;
			});
			this.$forceUpdate();
		},
		// 责任部门电梯 左右滑动
		changeStatus(idx) {
			if (this.tabIdx === 2) {
				return;
			}
			this.statusActive = idx;
			this.obj = {};
			this.obj.current = 1;
			this.obj.size = 20;
			this.obj.eleClassify = idx - 1;
			this.gardenArr = [];
			this.searchVal = '';
			if (idx === 0) {
				delete this.obj.eleClassify;
			}
			// 清空数据
			this.closeItem();
			this.$refs.filterModel.$refs['filter-drawer'].handleReset();
			this.$refs.filterModel._data.chooseArr = [];
			// 
			this.initElevatorGroup('act');
			this.initStatistics();
			this.$forceUpdate();
		},

		// 跳转项目详情
		toItemDetial(item) { 
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			uni.navigateTo({
				url: '/pageModules/projectInfo/detail?id=' + item.buildingId,
				success: () => {
					uni.hideLoading();
				},
				fail: () => {
					uni.hideLoading();
				}
			});
			// }
		},

		// 电梯详情页
		toMiantain(obj) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			uni.navigateTo({
				url: `/subpages/elevator/projectInfo/eleDetail?id=${obj.elevatorId}`,
				success: () => {
					uni.hideLoading();
				},
				fail: () => {
					uni.hideLoading();
				}
			});
		},
		// 电梯信息页
		goElevator(obj, type) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			let str = '';
			if (type === 'info') {
				str = '/subpages/elevator/projectInfo/elevatorInfoPage?id=' + obj.elevatorId;
			}
			if (type === 'history') {
				str = '/subpages/elevator/projectInfo/eleDetail?id=' + obj.elevatorId;
			}
			uni.navigateTo({
				url: str,
				success:()=>{
					uni.hideLoading();
				},
				fail:()=>{
					uni.hideLoading();
				}
			});
		},
		toProject(id) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			uni.navigateTo({
				url: `/pageModules/projectInfo/index?id=${id}&type=0`,
				success:()=>{
					uni.hideLoading();
				},
				fail:()=>{
					uni.hideLoading();
				}
			});
		},
		// 责任人弹窗
		userClick(item, indexs) {
			this.showPopups = true;
			this.actState = indexs;
			let arrName = (item.realNames || '').split(',');
			let arrPhone = (item.phones || '').split(',');
			let arrItem = [];
			if (item.realNames && item.phones) {
				for (let i = 0; i < arrName.length; i++) {
					arrItem.push({ realNames: arrName[i], phones: arrPhone[i] });
				}
				this.mantlesArr = arrItem;
			}
		},
		close() {
			this.actState = -1;
			this.showPopups = false;
		},
		showChange(e) {
			if (!e.show) this.actState = -1;
		},
		// 拨号
		dial(item) {
			if (item.phones) {
				uni.showModal({
					title: '拨打电话',
					content: item.phones,
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: item.phones
							});
						}
					}
				});
			} else {
				uni.showModal({
					content: '该责任人未绑定电话号码，请联系管理员',
				});
			}
		},
		closeItem() {
			let childrens = this.gardenArr || [];
			for (let i = 0; i < childrens.length; i++) {
				childrens[i].isOpens = false;
			}
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f8f8f8;
}

.my_wrapper {
	// height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;

	.wrapper {
		position: sticky;
		z-index: 10;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;

		.item_search {
			// width: calc(100% - 40rpx);
			// overflow-x: hidden;
			display: flex;
			background: #ffffff;
			// padding: 20rpx;
			align-items: center;

			.search-bar {
				width: 600rpx;
				height: 64rpx;
				margin: 20rpx;
				box-sizing: border-box;
				background: #f6f6f6;
				border-radius: 8rpx;
				display: flex;
				align-items: center;

				.uni-search-bar {
					/deep/ .uni-searchbar {
						padding: 0;
					}

					/deep/ .uni-searchbar__box {
						width: 600rpx;
						height: 64rpx;
						justify-content: flex-start;
						font-size: 26rpx;
						color: #ccc;
						background-color: #f6f6f6;
						border: 0;
						border-radius: 8rpx;
					}

					/deep/ .uni-icons {
						width: 40rpx;
						height: 40rpx;
					}

					/deep/ .uni-searchbar__text-placeholder {
						margin: 0;
					}

					/deep/ .uni-searchbar__box-search-input {
						border: 0;
						padding: 0;
					}
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.search-bar-right {
				display: flex;
				flex: 1;
				align-items: center;
				font-size: 26rpx;
				color: #333;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

		}

		.tabs {
			display: flex;
			align-items: flex-end;
			border-bottom: 2rpx solid #eeeeee;
			height: 74rpx;
			&-item {

				display: flex;
				align-items: center;
				justify-content: center;
				transition: .3s all;
				color: #93b1c7;
				font-size: 26rpx;
				border-bottom: 4rpx solid #ffffff;
				margin: 0 20rpx;
				padding: 16rpx 0;

			}

			.act {
				border-color: #0091ff;
				color: #0091ff;
				font-size: 30rpx;
				font-weight: bold;
			}

		}

		.approveStatus {
			// height: 88rpx;
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			// overflow-x: scroll;
			width: 100%;
			white-space: nowrap;
			// position: relative;
			border-bottom: 2rpx #eee solid;

			.apptop {
				font-size: 26rpx;
				padding: 6rpx 20rpx;
				color: #666;
				margin-right: 15rpx;
				border-radius: 26rpx;
				background-color: #f3f6f8;

			}

			.active {
				color: #0091FF;
				background-color: #dcf0ff;
			}
		}

	}

	.item_top {
		margin: 20rpx 40rpx 20rpx 10rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;

		text {
			color: #0091ff;
		}
	}

	.item_content {
		display: flex;
		// flex-direction: row;
		// justify-content: center;
		width: 710rpx;
		margin: 0 auto;
		overflow: auto;

		.content_L {
			// overflow-y: auto;
			// background-color: #FFFFFF;
			// flex: 0 0 420rpx;
			width: 710rpx;
			// margin: 0 auto;
			border-radius: 8rpx;

			.L_text {
				// padding: 20rpx 20rpx 0 20rpx;
				background-color: #ffffff;
				width: 710rpx;
				display: flex;
				flex-direction: column;
				// justify-content: space-between;
				margin-bottom: 20rpx;

				.L_container {
					display: flex;
					width: 710rpx;
				}

				.container_left {
					width: 60rpx;
					// flex: 0 0 60rpx;
					margin: 40rpx 20rpx 20rpx 20rpx;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.container_Cont {
					flex: 1;
					margin: 20rpx 20rpx 0 0;
				}

				.container_right {
					display: flex;
					width: 150rpx;
					// flex: 0 0 100rpx;
					// background-color: pink;

					.trrow {
						margin-top: 15rpx;
						// width: 100%;
						// display: flex;
						// justify-content: flex-end;
						// position: absolute;
						// top: 40%;
						// right: 30rpx;
						// width: 300rpx;
						// display: flex;
						// justify-content: flex-end;
						// // background: pink;
						// height: 60rpx;

						view {
							width: 18rpx;
							height: 18rpx;
							border-left: 2rpx #999999 solid;
							border-bottom: 2rpx #999999 solid;
							transform: rotate(-45deg);
							margin-top: 30rpx;
						}
					}

				}

				.L_one {
					display: block;
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
					// width: 600rpx;

					text {
						// font-size: 24rpx;
						// font-weight: normal;
						// background: #fde6e6;
						// color: #e02020;
						// border: 2rpx solid #fc9e9e;
						// border-radius: 4rpx;
						// padding: 0 10rpx 1rpx 10rpx;
						// margin-left: 12rpx;
						// white-space: nowrap;
					}
				}

				.L_two {
					display: block;
					font-size: 24rpx;
					color: #999999;
					margin: 5rpx 0 24rpx 0;
					width: 550rpx;
				}

				.L_tree {
					padding-bottom: 24rpx;
					// width: 600rpx;
					display: flex;
					font-size: 24rpx;
					width: 250rpx;

					// align-items: center;
					.tips_item {
						// padding-bottom: 20rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
					}

					.projectMsg {
						color: #0091ff;
						// padding: 10rpx 0;
						display: flex;
						font-size: 24rpx;
						flex: 1;
						// padding-left: 18rpx;
					}
				}
			}

			.lines {
				width: 680rpx;
				margin: 0 auto;
				border-bottom: 2rpx solid #eeeeee;
			}

			.content {
				display: flex;
				flex-direction: row;
				// height: 600rpx;
				max-height: 600rpx;
				padding-bottom: 30rpx;
				// background-color: pink;
				width: 680rpx;
				overflow-y: auto;
				margin: 0 auto;

				.cont_L {
					// width: 710rpx;
					width: 680rpx;

					.contElevar {
						padding: 30rpx 0rpx;
						// height: 140rpx;
						font-size: 24rpx;
						display: flex;
						// width: 70%;
						position: relative;

						// border-bottom: #eee 2rpx solid;
						.contElevar_Left {
							flex: 0 0 480rpx;
							margin-right: 20rpx;

							.contTitle {
								.redTag {
									font-size: 24rpx;
									font-weight: 500;
									background: #fde6e6;
									color: #e02020;
									border: 2rpx solid #fc9e9e;
									border-radius: 4rpx;
									padding: 0 10rpx 1rpx 10rpx;
									margin-left: 12rpx;
									white-space: nowrap;
								}

								.tit_img {
									width: 32rpx;
									height: 32rpx;
									margin: 0rpx 10rpx 3rpx 0rpx;
									vertical-align: bottom;
								}
							}

							.light {
								margin-left: 10rpx;
								display: inline-block;
								border: 2rpx solid #89ccff;
								border-radius: 6rpx;
								font-size: 24rpx;
								font-weight: 400;
								text-align: left;
								color: #0091ff;
								padding: 0rpx 5rpx;
							}

							.info {
								color: #666666;

								text {
									color: #cccccc;
									margin: 0rpx 10rpx;
								}
							}

							.infoTips {
								width: 158rpx;
								height: 32rpx;
								background: #fff0e6;
								border-radius: 16rpx;
								font-size: 22rpx;
								font-weight: 400;
								color: #fa6400;
								text-align: center;
								margin-top: 10rpx;

							}
						}

						.contElevar_Right {
							flex: 0 0 180rpx;
							display: flex;
							justify-content: flex-end;

							.middle_R {

								display: flex;
								// align-items: center;
								margin-top: 20rpx;
							}

							.nameContent {
								display: flex;
								flex: 1;
								flex-wrap: wrap;
								justify-content: flex-end;

							}

							.nameArea {
								display: flex;
								align-items: center;
								// margin-top: 14rpx;
								// margin-left: 20rpx
							}
						}

					}

					.actElevar {
						background-color: #f8f8f8;
						border: 4rpx solid;
						border-left-color: #0091ff;
						border-top-color: transparent;
						border-bottom-color: transparent;
						border-right-color: transparent;
					}
				}
			}
		}

		.content_R {
			overflow-y: auto;
			flex: 1;

			.R_text {
				padding: 40rpx 40rpx 0 20rpx;

				.lines {
					margin-top: 30rpx;
					border-bottom: 2rpx solid #eeeeee;
				}

				text:nth-child(1) {
					display: block;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}

				text:nth-child(2) {
					display: block;
					border: 2rpx solid #0091ff;
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #0091ff;
					padding: 5rpx;
					margin-top: 6rpx;
					width: 112rpx;
					text-align: center;
				}
			}
		}
	}

	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;
		width: 710rpx;
		height: calc(100% - 400rpx);

		.circle {
			width: 112rpx;
			height: 112rpx;
			border-radius: 50%;
			// background-color:#e9e9e9 ;

		}

		image {
			width: 112rpx;
			height: 112rpx;
		}

		.title {
			font-size: 28rpx;
			color: #666;
			font-weight: 400;
			margin-top: 10rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999;
		}
	}

}

.memberName {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	font-size: 20rpx;
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	background-color: #0091ff;
	color: #fff;
	margin-right: 12rpx;

	.people {
		width: 54rpx;
		position: absolute;
		left: 0;
		// bottom: -10rpx;
		top: 40rpx;
		background: #faf1d9;
		border: 0.5px solid #d5c498;
		border-radius: 4rpx;
		box-sizing: border-box;
		font-size: 16rpx;
		text-align: center;
		color: #8d6800;
	}
}

.popupWrapper {
	width: 100%;
	height: 100%;
	background-color: $uni-bg-color-mask;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: flex-end;
	animation: fadeInOut 0.3s ease;
	box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
}

@keyframes scaleFrames {
	from {
		transform: translateY(110%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes fadeInOut {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.calendarEdit {
	background-color: #fff;
	height: 678rpx;
	border-radius: 8rpx 8rpx 0rpx 0rpx;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	animation: scaleFrames 0.3s ease;

	.edit_bor {
		width: 100%;
		padding: 20rpx 0;

		.down-btn {
			width: 64rpx;
			height: 10rpx;
			background: #d8d8d8;
			border-radius: 6rpx;
			margin: 0 auto;
		}
	}

	.edit_content {
		width: 680rpx;
		margin: 0 auto;

		.executive_tit {
			margin-bottom: 20rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.executive {
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			// border-bottom: 2rpx #eee solid;
			padding-bottom: 20rpx;

			.executive_gr {
				margin-bottom: 20rpx;
			}

			.executive_user {
				display: flex;
				margin-bottom: 10rpx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #eee;
				padding: 20rpx 0;

				.signStatus {
					color: #FA6400;
					text-align: center;
					background-color: #ffefe3;
					font-size: 24rpx;
					font-weight: 400;
					margin: 0 10rpx;
					padding: 0 10rpx;
				}
			}

			.last {
				border: none;
			}
		}
	}
}
</style>
